import React from 'react'
import './index.css'
export default function Footer({ todoList, setTodoList }) {
  //console.log(todoList);
  //计算已完成的数量
  const getCheckedNum = () => {
    return todoList.reduce((p, c) => c.done ? p + 1 : p, 0)
  }

  //全选逻辑
  const checedAllHandle = (e) => {
    //console.log(e.target.checked);
    //当所有的都选择上 更改他们的状态为ture
    const newChecked = e.target.checked
    const newTodoList = todoList.map((item) => {
      //console.log(item);
      return { ...item, done: newChecked }
    })
    setTodoList(newTodoList)
  }

  //清除所有以完成的逻辑
  const deleteAllHandle = () => {
    const newTodoList = todoList.filter(item => !item.done)
    setTodoList(newTodoList)
  }

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" onChange={checedAllHandle} checked={getCheckedNum() === todoList.length && todoList.length !== 0} />
      </label>
      <span>
        <span>已完成{getCheckedNum()}</span> / 全部{todoList.length}
      </span>
      <button onClick={deleteAllHandle} className="btn btn-danger">清除已完成任务</button>
    </div>
  )
}
